<template>
    <div class="movie-detail">
        <div class="loading" v-if="isLoading">
            <com-loading></com-loading>
        </div>
        <div v-if="!isLoading">
            <!-- 电影信息 -->
            <div 
                class="movie-info"
                :style="{
                            'background':movieData.movie.backgroundColor
                        }">
                <!-- 返回首页/返回上一页 -->
                <div 
                    class="movie-info-header"
                    :style="{
                        'background':movieData.movie.backgroundColor
                    }">
                    <div @click="gobackPage()">
                        <i class="bi bi-chevron-left"></i>返回
                    </div>
                    <router-link to='/'>
                        <i class="bi bi-house-door"></i> 首页
                    </router-link>
                </div>
                <!-- 电影图文信息 -->
                <div class="movie-i-text">
                    <div 
                        class="photo"
                        :style="{  background:`url('${loadingUrl}') 50% 50% no-repeat`
                                    ,'background-size': '100% 100%'}">
                        <img :src="movieData.movie.img.replace('w.h','170.230')" alt="">
                    </div>
                    <div class="m-info-text">
                        <div class="title">{{movieData.movie.nm}}</div>
                        <div class="Eng-title">{{movieData.movie.enm}}</div>
                        <div 
                            class="movie-type"
                            v-if='movieData.movie.cat != undefined'>
                            {{movieData.movie.cat.replace(/,/g,' / ')}}
                        </div>
                        <div 
                            class="movie-star"
                            v-if='movieData.movie.star != undefined'>
                            {{movieData.movie.star.replace(/,/g,' / ')}}
                        </div>
                        <div class="movie-time">
                            {{movieData.movie.pubDesc}} /
                            {{movieData.movie.dur}} 分钟
                        </div>
                    </div>
                </div>
                <!-- 电影评分 -->
                <div class="movie-point">
                    <div class="movie-point-top">
                        <div class="title">购票评分</div>
                        <div class="movie-wish">{{wish}} 人想看</div>
                        <div class="movie-watched">{{watched}} 人看过</div>
                    </div>
                    <div class="movie-point-mid">
                        <div class="data">
                            <div class="point" v-if="movieData.movie.sc > 0">{{movieData.movie.sc}}</div>
                            <div class="point-num" v-if="movieData.movie.sc > 0">{{snum}}人评</div>
                            <div class="point"  v-if="!(movieData.movie.sc > 0)">暂无评分</div>
                        </div>
                        <div class="chart" v-if="movieData.movie.sc > 0">
                            <!-- movieData.distribution -->
                            <div class="star-bar">
                                <div class="star-icons">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div 
                                        class="precent"
                                        :style='{width: starPrecent[0].percent*100 + "%"} '>
                                    </div>
                                </div>
                            </div>
                            <div class="star-bar">
                                <div class="star-icons">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div 
                                        class="precent"
                                        :style='{width: starPrecent[1].percent*100 + "%"} '>
                                    </div>
                                </div>
                            </div>
                            <div class="star-bar">
                                <div class="star-icons">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div 
                                        class="precent"
                                        :style='{width: starPrecent[2].percent*100 + "%"} '>
                                    </div>
                                </div>
                            </div>
                            <div class="star-bar">
                                <div class="star-icons">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div 
                                        class="precent"
                                        :style='{width: starPrecent[3].percent*100 + "%"} '>
                                    </div>
                                </div>
                            </div>
                            <div class="star-bar">
                                <div class="star-icons">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/grey-star.png" alt="">
                                    <img src="@/assets/img/white-star.png" alt="">
                                </div>
                                <div class="bar">
                                    <div 
                                        class="precent"
                                        :style='{width: starPrecent[4].percent*100 + "%"} '>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div 
                        class="movie-point-bottom"
                        v-if='movieData.movie.scm != undefined && movieData.movie.scm.length > 0'>
                        <div class="speaking">
                            {{movieData.movie.scm}}
                        </div>
                    </div>
                </div>
                <!-- 电影简介 -->
                <div class="movie-dra">
                    <div class="title">
                        简介
                        <!-- 点击展开简介的按钮 -->
                        <span v-if="!draAll" @click="draAll = true">
                            展开<i class="bi bi-chevron-down"></i>
                        </span>
                        <!-- 点击收缩简介的按钮 -->
                        <span v-if="draAll" @click="draAll = false">
                            收缩<i class="bi bi-chevron-up"></i>
                        </span>
                    </div>
                    <div v-if="draAll">
                        {{movieData.movie.dra}}
                    </div>
                    <div class="no-all" v-if="!draAll">
                        {{movieData.movie.dra}}
                    </div>
                </div>
                <!-- 演员列表 -->
                <div class="movie-performer">
                    <div class="title">演员列表</div>
                    <ul v-if="movieData.celebrities.length > 0">
                        <li 
                            v-for='item in movieData.celebrities'
                            :key = 'item.id'>
                            <img :src="item.avatar.replace('w.h','170.230')" alt="">
                            <div class="cnm">{{item.cnm}}</div>
                            <div class="desc">{{item.desc}}</div>
                        </li>
                    </ul>
                    <div class="title" v-if="movieData.celebrities.length == 0">暂时没有演员消息</div>
                </div>
                <!-- 剧照 -->
                <div class="movie-photo">
                    <div class="title">剧照</div>
                    <ul 
                        v-if="movieData.movie.photos != undefined && movieData.movie.photos.length > 0"
                        class="inALine">
                        <li
                            v-for='item,index in movieData.movie.photos'
                            :key="item+index"
                            :style="{background:`url('${loadingUrl}') 50% 50% no-repeat`,'background-size': '100% 100%'}"
                            @click="isShowPic = true;showPicUrl = item.replace('w.h','2500.2500')">
                            <img :src='item.replace("w.h","140.93")'  alt="">
                        </li>
                    </ul>
                    <div 
                        class="title"
                        v-if="movieData.movie.photos == undefined || movieData.movie.photos.length <= 0">
                        暂无剧照
                    </div>
                </div>
                <show-pic 
                    v-show="isShowPic"
                    @close = 'closePic'
                    :imgUrl = 'showPicUrl'
                    >
                </show-pic>
            </div>
        </div>
        <!-- 相关的电影 -->
        <div 
            class="recommend-movie"
            v-if="!isLoading">
            <div class="title">相关电影</div>
            <ul 
                class="inALine"
                v-if ="movieData.relatedMovies != undefined && movieData.relatedMovies.length > 0">
                <li 
                    v-for='item in movieData.relatedMovies'
                    :key="item.id"
                    @click="gotoSelf(item.id)">
                    <div class="photo" 
                        :style="{  background:`url('${loadingUrl}') 50% 50% no-repeat`
                                    ,'background-size': '100% 100%'}">
                        <img :src="item.img.replace('w.h','170.230')" alt="">
                    </div>
                    <div class="movieNm shortTxt">{{item.title}}</div>
                </li>
            </ul>
            <div 
                class="title"
                v-if ="movieData.relatedMovies == undefined || movieData.relatedMovies.length <= 0">
                暂无相关的电影信息
            </div>
        </div>
        <div class="gotoBuy">
            <div class="brank-bottom"></div>
            <div class="bottom">
                <div 
                    class="btn-buy"
                    @click="goBuy">
                    特惠购票
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import comLoading from '@/components/comLoading.vue'
import showPic from '@/components/showPic.vue'
export default {
    name: 'movieDetail',
    data() {
        return {
            mid: null, //电影id
            isLoading: true, //正在加载
            movieData: null, //电影接口返回的数据
            //不同评分的人的比例
            starPrecent: [
                {percent: 0},
                {percent: 0},
                {percent: 0},
                {percent: 0},
                {percent: 0},
            ], 
            wish: 0,//想看人数
            watched: 0,//已看人数
            snum: 0,//评分人数
            draAll: false,// 简介是否展开显示全部
            loadingUrl: require('@/assets/img/loading2.gif'),
            isShowPic : false,
            showPicUrl: require('@/assets/img/loading2.gif'),
        }
    },
    components: {
        comLoading,
        showPic
    },
    methods: {
        runNumver(n) {
            var timer = setInterval(() => {
                if(this[n] < this.movieData.movie[n]){
                    this[n] += Math.ceil((this.movieData.movie[n] - this[n]) / 20);
                    // console.log('go');
                }
                else{
                    // console.log(n,this[n],this.movieData.movie[n]);
                    clearInterval(timer);
                    timer = null;
                }
            }, 2);
        },
        closePic(val) {
            this.isShowPic = val;
        },
        gotoSelf(id) {
            this.$router.push('/movie_detail/'+id+'/required');
        },
        gobackPage() {
            this.$router.go(-1);
        },
        goBuy() {
            this.$router.push('/movie_buy/'+20+'/'+this.mid+'/required');
        },
        loadData() {
            this.axios
            .get('https://apis.netstart.cn/maoyan/movie/detail?movieid='+this.mid)
            .then((success)=>{
                // console.log(success);
                this.movieData = success;
                this.isLoading = false;
                // 显示不同评分的比例
                setTimeout(() => {
                    this.starPrecent = this.movieData.distribution;
                }, 0);
                // 让数据跑动起来
                this.runNumver('wish');
                this.runNumver('watched');
                this.runNumver('snum');
                // 预处理演员列表
                var actorList = [];
                var actorId = new Set();
                this.movieData.celebrities.forEach(item => {
                    if(item.desc != undefined && item.desc.length > 0 && !actorId.has(item.id)){
                        actorList.push(item);
                        actorId.add(item.id);
                    } 
                });
                this.movieData.celebrities = actorList;
                // console.log(this.movieData.celebrities);
            })
            .catch((err)=>{
                console.log(err);
            })
            // this.axios
            // .get('./maoyanData/movieDetail.json')
            // .then((success)=>{
            //     // console.log(success);
            //     this.movieData = success;
            //     this.isLoading = false;
            //     // 显示不同评分的比例
            //     setTimeout(() => {
            //         this.starPrecent = this.movieData.distribution;
            //     }, 0);
            //     // 让数据跑动起来
            //     this.runNumver('wish');
            //     this.runNumver('watched');
            //     this.runNumver('snum');
            //     // 预处理演员列表
            //     var actorList = [];
            //     var actorId = new Set();
            //     this.movieData.celebrities.forEach(item => {
            //         if(item.desc != undefined && item.desc.length > 0 && !actorId.has(item.id)){
            //             actorList.push(item);
            //             actorId.add(item.id);
            //         } 
            //     });
            //     this.movieData.celebrities = actorList;
            //     // console.log(this.movieData.celebrities);
            //     // console.log(this.movieData.relatedMovies);
            // })
            // .catch((err)=>{
            //     console.log(err);
            // })
        }
    },
    created() {
        // 获取地址里的电影id
        this.mid = this.$route.params.mid;
    },
    mounted() {
        this.loadData();
    },
    watch: {
        $route(){
            this.isLoading = true;
            this.mid = this.$route.params.mid;
        },
        mid() {
            this.starPrecent = [
                {percent: 0},
                {percent: 0},
                {percent: 0},
                {percent: 0},
                {percent: 0},
            ];
            this.wish = 0;
            this.watched = 0;
            this.snum = 0;
            this.loadData();
            window.scrollTo(0,0);
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
$fontTrans1 : rgba(255, 255, 255, 0.8);
$fontTrans2 : rgba(255, 255, 255, 0.3);
$fontTrans3 : rgba(252, 255, 217, 0.9);
$bgTrans: rgba(0, 0, 0, 0.2);
.loading {
    position: fixed;
    padding: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.movie-info {
    color: white;
    padding-bottom: 40px;
    margin-bottom: -30px;
    & > div {
        padding: 10px 15px 10px 15px;
    }
    .movie-info-header {
        padding: 20px 15px 10px 15px;
        position: sticky;
        z-index: 99999;
        font-size: 20px;
        top: 0px;
        display: flex;
        justify-content: space-between;
        a {
            color: white;
        }
    }
    .movie-i-text {
        display: flex;
        font-size: 12px;
        color: $fontTrans1;
        img{
            width: 100px;
            height: 136px;
            
        }
        .photo {
            width: 100px;
            height: 136px;
            margin-right: 10px;
        }
        .m-info-text {
            & > div {
                padding: 2px 0;
            }
            .title {
                font-size: 22px;
                font-weight: bold;
                color: white;
                padding: 2px 0 10px 0;
            }
        }

    }

    .movie-point {
        margin: 2px 15px;
        background: $bgTrans;
        border-radius: 8px;
    }
    .movie-point-top {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: $fontTrans1;
        .title {
            color: white;
        }
    }
    .movie-point-mid {
        display: flex;
        justify-content: center;
        align-items: center;
        
        margin: 8px 0;
        .point {
            color: $fontColor2;
            font-size: 22px;
            font-weight: bold;
            text-align: right;
        }
        .point-num {
            font-size: 12px;
            color: $fontTrans2;
        }
        .chart {
            margin-left: 8px;
            font-size: 0;
            .star-bar > div {
                display: inline-block;
            }
            img {
                width: 10px;
                height: 10px;
                margin: 0 2px 2px 0;
            }
            .bar {
                margin-left: 3px;
                height: 10px;
                width: 70px;
                background-color: $bgTrans;
                vertical-align: top;
                border-radius: 10px;
                overflow: hidden;
                .precent {
                    height: 100%;
                    width: 0%;
                    background-color: $fontTrans2;
                    transition: width 1s;
                }
            }
        }
    }
    .movie-point-bottom {
        padding: 5px 10px;
        color: $fontTrans3;
        font-size: 12px;
        border-radius: 8px;
        background: $bgTrans;
    }
    .movie-dra {
        font-size: 16px;
        line-height: 1.7em;
        .title {
            margin-bottom: 5px;
            position: relative;
            span {
                line-height: 1.3em;
                position: absolute;
                right: 0;
                bottom: 0;
                font-size: 12px;
                color: $fontTrans1;
            }
        }
    }
    .movie-performer {
        .title {
            font-size: 16px;
            line-height: 1.7em;
            margin-bottom: 10px;
        }
        ul {
            overflow-y: hidden;
            overflow-x: auto;
            white-space: nowrap;
            &::-webkit-scrollbar {
                display: none;
            }
        }
        li {
            display: inline-block;
            margin-right: 8px;
            width: 100px;
            text-align: center;
        }
        .desc,
        .cnm {
            font-size: 14px;
            text-overflow:ellipsis;  /*文本裁切 显示省略号*/
            white-space: nowrap;  /*强制文本不换行*/
            overflow: hidden;  /*溢出文本隐藏*/
        }
        .desc {
            color: $fontTrans2;
        }
        img {
            width: 100px;
            height: 136px;
        }
    }
    .movie-photo {
        .title {
            font-size: 16px;
            line-height: 1.7em;
            margin-bottom: 10px;
        }
        li {
            width: 140px;
            height: 93px;
            overflow: hidden;
            display: inline-block;
            margin-right: 8px;
        }
        img {
            width: 140px;
            min-height: 93px;
        }
    }
}

.recommend-movie {
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0px 10px 10px 10px white;
    background-color: white;
    .title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    img {
        width: 100px;
        height: 136px;
    }
    .photo {
        width: 100px;
        height: 136px;
    }
    li {
        display: inline-block;
        margin-right: 10px;
        width: 100px;
    }
    .movieNm {
        margin-top: 6px;
        width: 100%;
        font-size: 12px;
    }
}

.no-all {
    display:-webkit-box;/*对象作为伸缩盒子模型展示*/
    -webkit-box-orient:vertical;/*设置或检索伸缩盒子对象的子元素的排列方式*/
    -webkit-line-clamp:3;/*显示的行数*/
    overflow:hidden;/*隐藏超出的*/
}

.gotoBuy {
    .brank-bottom {
        height: 52px;
    }
    .bottom {
        height: 50px;
        box-shadow: 0px 10px 10px 10px rgb(192, 192, 192);
        background-color: white;
        overflow: hidden;
        position: fixed;
        z-index: 999;
        bottom: 0;
        width: 100%;
        .btn-buy {
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-top: 10px;
            margin-left: 85px;
            border-radius: 15px;
            background-color: #FC3C42;
            color: white;
            font-size: 20px;
        }
    }
}


</style>